<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6" v-for="stat in stats" :key="stat.key">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-left">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
            <div class="stat-right">
              <el-icon :size="40" :color="stat.color">
                <component :is="stat.icon" />
              </el-icon>
            </div>
          </div>
          <div class="stat-trend">
            <el-icon v-if="stat.trend > 0" color="#67C23A" size="12">
              <CaretTop />
            </el-icon>
            <el-icon v-else color="#F56C6C" size="12">
              <CaretBottom />
            </el-icon>
            <span :class="stat.trend > 0 ? 'trend-up' : 'trend-down'">
              {{ Math.abs(stat.trend) }}%
            </span>
            <span class="trend-text">较上月</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
              <el-button type="primary" :icon="Refresh" size="small" @click="refreshChart">
                刷新
              </el-button>
            </div>
          </template>
          <div class="chart-container">
            <div class="placeholder-chart">
              <el-icon size="60" color="#909399">
                <TrendCharts />
              </el-icon>
              <p>销售趋势图表</p>
              <p class="sub-text">显示最近12个月的销售数据变化</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>客户分布</span>
              <el-button type="primary" :icon="View" size="small" @click="viewDetails">
                查看详情
              </el-button>
            </div>
          </template>
          <div class="chart-container">
            <div class="placeholder-chart">
              <el-icon size="60" color="#909399">
                <PieChart />
              </el-icon>
              <p>客户分布图表</p>
              <p class="sub-text">不同客户等级的分布情况</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据列表 -->
    <el-row :gutter="20" class="data-row">
      <!-- 最新客户 -->
      <el-col :xs="24" :lg="12">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>最新客户</span>
              <el-button type="text" @click="viewAllCustomers">查看全部</el-button>
            </div>
          </template>
          <div class="data-list">
            <div class="data-item" v-for="customer in recentCustomers" :key="customer.id">
              <el-avatar :size="40">{{ customer.name.charAt(0) }}</el-avatar>
              <div class="item-content">
                <div class="item-title">{{ customer.name }}</div>
                <div class="item-subtitle">{{ customer.phone }}</div>
              </div>
              <div class="item-meta">
                <el-tag :type="getCustomerTagType(customer.status)" size="small">
                  {{ customer.statusText }}
                </el-tag>
                <div class="item-time">{{ formatTime(customer.createdAt) }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 待办事项 -->
      <el-col :xs="24" :lg="12">
        <el-card class="data-card">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
              <el-button type="text" @click="viewAllTasks">查看全部</el-button>
            </div>
          </template>
          <div class="data-list">
            <div class="data-item todo-item" v-for="todo in todos" :key="todo.id">
              <div :class="['todo-priority', todo.priority]"></div>
              <div class="item-content">
                <div class="item-title">{{ todo.title }}</div>
                <div class="item-subtitle">{{ todo.description }}</div>
              </div>
              <div class="item-meta">
                <el-tag :type="getPriorityTagType(todo.priority)" size="small">
                  {{ getPriorityText(todo.priority) }}
                </el-tag>
                <div class="item-time">{{ formatTime(todo.dueDate) }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  User, 
  Money, 
  Tickets, 
  StarFilled,
  CaretTop,
  CaretBottom,
  TrendCharts,
  PieChart,
  Refresh,
  View
} from '@element-plus/icons-vue'

const router = useRouter()

// 统计数据
const stats = ref([
  {
    key: 'customers',
    label: '总客户数',
    value: '2,847',
    icon: User,
    color: '#409EFF',
    trend: 12.5
  },
  {
    key: 'sales',
    label: '本月销售',
    value: '¥486,890',
    icon: Money,
    color: '#67C23A', 
    trend: 8.2
  },
  {
    key: 'orders',
    label: '活跃订单',
    value: '127',
    icon: Tickets,
    color: '#E6A23C',
    trend: -2.1
  },
  {
    key: 'satisfaction',
    label: '客户满意度',
    value: '94.5%',
    icon: StarFilled,
    color: '#F56C6C',
    trend: 3.8
  }
])

// 最新客户
const recentCustomers = ref([
  {
    id: 1,
    name: '张美华',
    phone: '138****6789',
    status: 'active',
    statusText: '活跃',
    createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000)
  },
  {
    id: 2,
    name: '李建国',
    phone: '139****5678',
    status: 'potential',
    statusText: '潜在',
    createdAt: new Date(Date.now() - 5 * 60 * 60 * 1000)
  },
  {
    id: 3,
    name: '王桂花',
    phone: '137****4567',
    status: 'vip',
    statusText: 'VIP',
    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000)
  },
  {
    id: 4,
    name: '刘德华',
    phone: '136****3456',
    status: 'active',
    statusText: '活跃',
    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000)
  }
])

// 待办事项
const todos = ref([
  {
    id: 1,
    title: '跟进张美华的旅游意向',
    description: '客户咨询三亚5日游产品',
    priority: 'high',
    dueDate: new Date(Date.now() + 2 * 60 * 60 * 1000)
  },
  {
    id: 2,
    title: '准备下周客户活动材料',
    description: '老年旅游推介会准备工作',
    priority: 'medium',
    dueDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000)
  },
  {
    id: 3,
    title: '回访上月出团客户',
    description: '收集客户满意度反馈',
    priority: 'low',
    dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
  },
  {
    id: 4,
    title: '更新产品价格信息',
    description: '根据旺季调整更新价格',
    priority: 'medium',
    dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000)
  }
])

// 工具方法
const formatTime = (date) => {
  const now = new Date()
  const diff = now - date
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else {
    return `${days}天前`
  }
}

const getCustomerTagType = (status) => {
  const typeMap = {
    active: 'success',
    potential: 'info',
    vip: 'warning'
  }
  return typeMap[status] || 'info'
}

const getPriorityTagType = (priority) => {
  const typeMap = {
    high: 'danger',
    medium: 'warning',
    low: 'success'
  }
  return typeMap[priority] || 'info'
}

const getPriorityText = (priority) => {
  const textMap = {
    high: '紧急',
    medium: '一般',
    low: '较低'
  }
  return textMap[priority] || '一般'
}

// 事件处理
const refreshChart = () => {
  console.log('刷新图表数据')
  // TODO: 实现图表刷新逻辑
}

const viewDetails = () => {
  console.log('查看详情')
  // TODO: 跳转到详情页面
}

const viewAllCustomers = () => {
  router.push('/customers')
}

const viewAllTasks = () => {
  console.log('查看所有待办事项')
  // TODO: 跳转到待办事项页面
}

onMounted(() => {
  console.log('Dashboard已加载')
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.stat-left .stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-left .stat-label {
  font-size: 14px;
  color: #606266;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.trend-up {
  color: #67C23A;
}

.trend-down {
  color: #F56C6C;
}

.trend-text {
  color: #909399;
}

.charts-row {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-chart {
  text-align: center;
  color: #909399;
}

.placeholder-chart p {
  margin: 10px 0 5px 0;
  font-size: 16px;
}

.placeholder-chart .sub-text {
  font-size: 12px;
  color: #C0C4CC;
}

.data-row {
  margin-bottom: 20px;
}

.data-card {
  margin-bottom: 20px;
}

.data-list {
  max-height: 400px;
  overflow-y: auto;
}

.data-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #EBEEF5;
}

.data-item:last-child {
  border-bottom: none;
}

.item-content {
  flex: 1;
  margin-left: 15px;
}

.item-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 5px;
}

.item-subtitle {
  font-size: 12px;
  color: #909399;
}

.item-meta {
  text-align: right;
}

.item-time {
  font-size: 12px;
  color: #C0C4CC;
  margin-top: 5px;
}

.todo-item .todo-priority {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  margin-right: 15px;
}

.todo-priority.high {
  background-color: #F56C6C;
}

.todo-priority.medium {
  background-color: #E6A23C;
}

.todo-priority.low {
  background-color: #67C23A;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }
  
  .stat-content {
    flex-direction: column;
    text-align: center;
  }
  
  .stat-right {
    margin-top: 10px;
  }
}
</style>